<template>
  <!-- 搜索界面 -->
  <div class="searchContainer">
    <!-- 搜索框 -->
    <div class="searchTitle">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @cancel="onCancel"
        @input="onSearch"
        @search="onSearch"
      />
    </div>
    <!-- 历史搜索纪录 -->
    <div class="historyRecord" v-show="historyList.length">
      <!-- 标题 -->
      <div class="title">
        <h3>历史记录</h3>
        <van-icon class="icon" name="delete" @click="empty" />
      </div>
      <!-- 搜索记录按钮-->
      <div class="historyButton">
        <van-button
          class="historyButtonItem"
          plain
          type="default"
          size="small"
          v-for="(item, index) in historyList"
          :key="index"
          @click="toDetail"
          >{{ item }}</van-button
        >
      </div>
    </div>

    <!-- 热门搜索 -->
    <div class="hotSearch" v-show="!isShowSearchAndHistory">
      <!-- 标题 -->
      <h3>热门搜索</h3>
      <!-- 热门搜索按钮 -->
      <div class="hotButton">
        <van-button
          class="hotButtonItem"
          plain
          type="default"
          size="small"
          v-for="(item, index) in searchInfo.hotKeywordVOList"
          :key="index"
          @click="toDetail"
          >{{ item.keyword }}</van-button
        >
      </div>
    </div>

    <!-- 根据输入内容得来的搜索关键词 -->
    <div class="searchKeywordList">
      <ul class="searchKeywordListWarp">
        <li
          v-for="(item, index) in searchListKeyword"
          :key="index"
          class="searchKeywordItem"
          @click="handleSearchToDetail(item)"
        >
          <span>{{ item }}</span
          ><van-icon name="arrow" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { reqSearchKeyWord } from "@/api";
export default {
  name: "Search",
  data() {
    return {
      value: "",
      isShowSearchAndHistory: false,
      searchListKeyword: [],
      historyList: [],
    };
  },
  computed: {
    ...mapState({
      searchInfo: (state) => state.home.searchInfo,
      hotKeywordVOList: (state) => state.home.searchInfo.hotKeywordVOList,
    }),
  },
  mounted() {
    this.$store.dispatch("getSearchInfo");
    //如果本地存储的数据historyList有值，直接赋值给data中的historyList
    if (JSON.parse(localStorage.getItem("historyList"))) {
      this.historyList = JSON.parse(localStorage.getItem("historyList"));
    }
  },
  methods: {
    //点击取消执行
    onCancel() {
      //   this.$toast('取消');
      this.$router.push("/home");
    },
    //点击搜索按钮中的关键字跳转Detail
    toDetail(event) {
      let value = event.target.innerText;
      this.$router.push({ path: "/detail", query: { value } });
    },
    // 搜索的回调回车和input里的内容发生变化都会执行
    onSearch(value) {
      if (this.$timer) clearTimeout(this.$timer);
      this.$timer = setTimeout(async () => {
        if (!value.trim()) return (this.searchListKeyword = []);
        let res = await reqSearchKeyWord(value);
        console.log(res.data);
        if (!res.data.length) {
          this.$toast("暂无相关搜索");
        }
        // 没有搜索记录，把搜索值push进数组首位，存入本地
        if (!this.historyList.includes(value)) {
          this.historyList.unshift(value);
          localStorage.setItem("historyList", JSON.stringify(this.historyList));
        }
        this.searchListKeyword = res.data;
      }, 300);
    },
    // 点击搜索出来的关键词进行跳转
    handleSearchToDetail(value) {
      this.$router.push({ path: "/detail", query: { value } });
    },
    //清空历史搜索记录
    empty() {
      this.$toast.success("清空历史搜索成功");
      localStorage.removeItem("historyList");
      this.historyList = [];
    },
  },
};
</script>

<style lang="less" scoped>
.searchContainer {
  position: relative;
  //搜索框
  .searchTitle {
    width: 375px;
    height: 54px;
  }

  //热门搜索
  .hotSearch {
    width: 375px;
    height: 142px;
    h3 {
      font-size: 14px;
      color: #999;
      margin-left: 16px;
    }
    .hotButton {
      width: 355px;
      height: 82px;
      margin-left: 10px;

      .hotButtonItem {
        margin-left: 15px;
        &:hover {
          background-color: red;
        }

        // .van-button__content {
        //   background-color: red;
        // }
      }
    }
  }
  //根据输入内容得来的搜索关键词
  .searchKeywordList {
    position: absolute;
    top: 50px;
    width: 100%;

    // border: #999 1px solid;
    .searchKeywordListWarp {
      .searchKeywordItem {
        font-weight: 300;
        font-size: 15px;
        padding: 10px;
        border-bottom: #ccc 1px solid;
        background-color: #fff;
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  //历史记录
  .historyRecord {
    width: 375px;
    height: 121px;
    .title {
      width: 345px;
      height: 35px;
      display: flex;
      justify-content: space-between;
      h3 {
        font-size: 14px;
        color: #999;
        margin-left: 16px;
        line-height: 45px;
      }
      .icon {
        line-height: 45px;
      }
    }
    .historyButton {
      width: 360px;
      height: 41px;
      margin-left: 10px;
      .historyButtonItem {
        margin-left: 15px;
      }
    }
  }
}
</style>
